import { defineComponent, ref } from 'vue';
import request from '@/request'
import dayjs from "dayjs"
import { ACCOUNT_STATUS } from '@/dictionaries'

export type Permission = {
  pName?:string,
  code?:string,
  delFlag?:string,
  createTime?:string,
  status?:string,
  updateTime?: string,
  pId?: number,
  remark?:string,
}

export default defineComponent({
  name: 'controlPermission',
  setup() {
    const options = ref([
      {
        value: '所有',
        label: '所有',
      },
      {
        value: '正常',
        label: '正常',
      },
      {
        value: '停用',
        label: '停用',
      },
    ])

    const bjDisabled = ref(true)  //按钮能否使用 编辑
    const scDisabled = ref(true)  //按钮能否使用 删除
    const selection = ref([])
    const tableData = ref([])   //列表数组
    // 选中内容才可使用编辑，删除
    const handleSelectionChange = (val) => {
      if (val.length == 0) {
        bjDisabled.value = true
        scDisabled.value = true
      } else if (val.length == 1) {
        bjDisabled.value = false
        scDisabled.value = false
      } else {
        bjDisabled.value = true
        scDisabled.value = false
      }
      selection.value = val;
    }
    const dialogImageUrl = ref('') //查看大图 图片路径
    const dialogVisible = ref(false)  //  查看大图
    const dialogFormVisible = ref(false)  //是否显示添加页面弹出框
    // const num =ref(this.$store.state.num)
    const pName = ref('') //权限名称
    const code = ref('') //权限代码
    const remark = ref('') //权限说明
    const delFlag = ref('')//权限删除标志
    const createTime = ref('')//权限创建时间
    const updateTime = ref('') //权限最后更新时间
    const status = ref('') //权限状态 0正常， 1禁用

    const show123 = ref(true)  //添加图片框，是否显示
    const showFile = ref(false) //已经添加的图片 是否显示阅览图
    const imgList = ref([])   //上传图片数组
    const imgUrlDiv = ref('')  //
    const addOrUpdate = ref(0) //新增或者删除 状态
    //  添加用户弹出框
    const handleShowAdd = () => {
      addOrUpdate.value = 1
      dialogFormVisible.value = true
    }
    //提交添加或删除
    const subAddOrUpdate = () => {
      console.log(addOrUpdate.value)
      if (addOrUpdate.value == 1) {
        fnPerInsert()
      } else {
        fnPerUpdate()
      }
    }
    //清空 所有值
    const handleClearValue = () => {
      pName.value = ''
      code.value = ''
      remark.value = ''
      delFlag.value = ''
      createTime.value = ''
      updateTime.value = ''
      status.value = ''
    }
    //权限列表
    const fnPerList = () => {
      request('/api/permission/list', 'POST', {}).then(
        (res) => {
          tableData.value = res.data
        },
      )
    }
    const timeForMat = (row, column, cellValue) => {
      if (cellValue) {
        const date = dayjs(cellValue)
        if (dayjs.isDayjs(date)) {
          return date.format('YYYY-MM-DD');
        }
      }
      return '--'
    }
    //添加权限
    const fnPerInsert = () => {
      const params:Permission = {
        pName: pName.value,
        code: code.value,
        status: status.value.toString(),
        remark: remark.value,
      }
      request('/api/permission/insert', 'PUT', params).then(
        (res) => {
          // console.log(res)
          dialogFormVisible.value = false
          fnPerList()
        },
      )
    }

    const deletePid = ref([]) //多选 pId 数组
    //删除权限
    const fnPerDelete = () => {
      selection.value.map(x => {
        deletePid.value.push(x.pId)
      })
      request('/api/permission/delete', 'DELETE', { pIds: deletePid.value }).then(
        (res) => {
          fnPerList()
        })
    }

    const OneColPid = ref(0);
    //当行数据 pid  打开编辑框
    const handleShowUpdate = () => {
      addOrUpdate.value = 2
      selection.value.forEach((v:Permission) => {
        OneColPid.value = v.pId
        remark.value = v.remark
        updateTime.value = v.updateTime
        status.value = v.status
        createTime.value = v.createTime
        delFlag.value = v.delFlag
        code.value = v.code
        pName.value = v.pName
      })
      dialogFormVisible.value = true
    }
    const perOption = ref([{ label: '正常', value: 0 }, { label: '禁用', value: 1 }])
    //编辑权限
    const fnPerUpdate = () => {
      const params:Permission = {
        pName: pName.value,
        code: code.value,
        delFlag: delFlag.value,
        createTime: createTime.value,
        status: status.value,
        updateTime: updateTime.value,
        pId: OneColPid.value,
        remark: remark.value,
      }
      request('/api/permission/update', 'POST', params).then(
        (res) => {
          // console.log('update', res)
          dialogFormVisible.value = false
          fnPerList()
        },
      )
    }
    const searchPerCode = ref('')     //搜索框权限ID
    const searchPerName = ref('')   //搜索框权限名称
    const searchStateValue = ref('')     // 搜索框状态
    //搜索权限
    const fnPerSearch = () => {
      request('api/permission/list', 'POST', { pName: searchPerName.value, code: searchPerCode.value }).then(
        (res) => {
          tableData.value = res.data
        },
      )
    }
    //重置搜索框数据
    const headleSearchReset = () => {
      searchPerCode.value = ''
      searchPerName.value = ''
      searchStateValue.value = ''
    }
    return {
      searchPerCode,
      searchPerName,
      searchStateValue,
      options,
      tableData,
      handleSelectionChange,
      bjDisabled,
      scDisabled,
      handleShowAdd,
      dialogFormVisible,
      dialogImageUrl,
      dialogVisible,
      handleClearValue,
      show123,
      showFile,
      imgList,
      imgUrlDiv,
      fnPerList,
      timeForMat,
      fnPerInsert,
      fnPerDelete,
      fnPerUpdate,
      OneColPid,
      handleShowUpdate,
      fnPerSearch,
      headleSearchReset,
      pName,
      remark,
      status,
      code,
      perOption,
      subAddOrUpdate,
      ACCOUNT_STATUS,
    }
  },
  components: {},
  created() {
    this.fnPerList()
  },
});
